<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title data-l10n-id="zotcard-card-viewer"></title>
	<script src="chrome://zotero/content/include.js"></script>
	<link rel="localization" href="zotcard.ftl" />
	<link rel="localization" href="card-manager.ftl" />
	<link rel="localization" href="card-viewer.ftl" />
	<link rel="stylesheet" href="../modules/common.css" />
	<link rel="stylesheet" href="../modules/element-plus.css" />
	<script src="../modules/vue.global.prod.js"></script>
	<script src="../modules/element-plus.js"></script>
	<script src="../modules/element-plus-zh-cn.js"></script>
	<script src="../modules/element-plus-en.js"></script>
	<script src="../modules/element-plus-zh-tw.js"></script>
	<script src="../modules/element-plus-icons.js"></script>
	<script src="../modules/zot-render-element-plus.js"></script>
	<script id="jsfile"></script>
	<script>
		document.getElementById('jsfile').src = window.Zotero ? "card-viewer.js" : "card-viewer-dev.js"
	</script>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-size: 12px;
			background-color: #D3D8E1;
		}

		.header {
			height: 40px;
			background-color: #dce8ff;
			display: flex;
			align-items: center;
			padding: 0 10px;
			justify-content: space-between;
		}

		.header .el-divider--vertical {
			border-left: 1px #c4d6ff var(--el-border-style) !important;
		}

		.main {
			margin: 40px 10px;
		}

		.card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
		}

		.el-card__header {
			display: flex;
    		align-items: center;
		}

		.card-header .el-icon {
			font-size: 18px;
			width: 100%;
		}

		.card-footer {
			border-top: 1px solid var(--el-card-border-color);
			padding: var(--el-card-padding) 0 !important;
			color: var(--el-text-color-placeholder) !important;
		}

		.el-card {
			--el-card-padding: 10px !important;
			height: 100%;
		}

		.el-card__header {
			padding: var(--el-card-padding) !important;
			height: 75px;
		}

		.el-card__body {
			padding: var(--el-card-padding) !important;
			height: calc(100% - 75px - 20px);
    		overflow: auto;
		}

		.el-carousel__item {
			opacity: 0.3;
		}

		.el-carousel__item.is-active {
			opacity: 1;
		}

		.card-content {
			margin-bottom: 40px;
		}

		.el-descriptions--small .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    		padding-bottom: 2px !important;
		}

		.el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    		line-height: 15px !important;
		}

		.el-descriptions__label:not(.is-bordered-label) {
			color: var(--el-text-color-placeholder) !important;
		}

	</style>
</head>

<body>
	<div id="app">
		<!-- header -->
		<div class="header">
			<el-space wrap>
				<el-link :underline="false" @click="handleTools('zotero')" data-l10n-id="zotcard-card-manager-toolbar-zotero-title">
					<img src="chrome://zotero/skin/z.svg" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
				</el-link>
				<el-divider direction="vertical"></el-divider>
				<el-space :size="5">
					<label data-l10n-id="zotcard-card-manager-ui-title_fontsize">标题字体1</label>
					<el-input-number style="width: 80px;" v-model="profiles.titleFontSize" :min="5" :max="50" @input="handleUIChange('titleFontSize')"></el-input-number>
				</el-space>
				<el-space :size="5">
					<label data-l10n-id="zotcard-card-manager-ui-centent_fontsize">内容字体1</label>
					<el-input-number style="width: 80px;" v-model="profiles.contentFontSize" :min="5" :max="50" @input="handleUIChange('contentFontSize')"></el-input-number>
				</el-space>
				<el-space :size="5" class="hcenter">
					<label data-l10n-id="zotcard-card-manager-ui-style">风格</label>
					<el-radio-group v-model="profiles.carouselType" @change="handleUIChange('carouselType')">
						<el-radio-button label="card"><span data-l10n-id="zotcard-card-manager-ui-style-card">卡片1</span></el-radio-button>
						<el-radio-button label=""><span data-l10n-id="zotcard-card-manager-ui-style-tiled">平铺1</span></el-radio-button>
					</el-radio-group>
				</el-space>
			</el-space>
			<el-space v-if="cards.length > 1">
				<span>{{ renders.currentIndex + 1 }}</span><span>/</span>{{ renders.total }}<span></span>
			</el-space>
			<el-space v-if="cards.length > 1" class="el-link-text">
				<el-link :underline="false" @click="handleOrderby('random')" :type="filters.orderby === 'random' ? 'primary' : ''">
					<el-icon>
						<Switch v-if="filters.orderby === 'random'"></Switch>
					</el-icon> <span data-l10n-id="zotcard-card-manager-random">random</span>
				</el-link>
				<el-link :underline="false" @click="handleOrderby('times')" :type="filters.orderby === 'times' ? 'primary' : ''">
					<el-icon>
						<D-Caret v-if="filters.orderby !== 'times'"></D-Caret>
						<Caret-Bottom v-else-if="renders.isOrderbyDesc('times')"></Caret-Bottom>
						<Caret-Top v-else></Caret-Top>
					</el-icon> <span data-l10n-id="zotcard-card-manager-times">times</span>
				</el-link>
				<el-link v-for="f in ['date', 'dateAdded', 'dateModified', 'title']" :underline="false" @click="handleOrderby(f)" :type="filters.orderby === f ? 'primary' : ''">
					<el-icon>
						<D-Caret v-if="filters.orderby !== f"></D-Caret>
						<Caret-Bottom v-else-if="renders.isOrderbyDesc(f)"></Caret-Bottom>
						<Caret-Top v-else></Caret-Top>
					</el-icon> <span :data-l10n-id="`zotcard-card-manager-${f}`">{{ f }}</span>
				</el-link>
				<el-link v-for="f in ['words', 'lines', 'sizes']" :underline="false" @click="handleOrderby(f)" :type="filters.orderby === f ? 'primary' : ''">
					<el-icon>
						<D-Caret v-if="filters.orderby !== f"></D-Caret>
						<Caret-Bottom v-else-if="renders.isOrderbyDesc(f)"></Caret-Bottom>
						<Caret-Top v-else></Caret-Top>
					</el-icon> <span :data-l10n-id="`zotcard-card-manager-${f}`">{{ f }}</span>
				</el-link>
			</el-space>
		</div>

		<!-- cards -->
		<div class="main">
			<el-carousel :initial-index="renders.currentIndex" indicator-position="none" arrow="always" :type="profiles.carouselType" :height="(renders.innerHeight - 120) + 'px'" @change="handleCarouselChange" :loop="false" :autoplay="false">
				<el-carousel-item v-for="n in renders.loads" :key="n">
					<el-card :body-style="{ fontSize: profiles.contentFontSize + 'px' }">
						<template #header>
							<div class="card-header">
								<h1 class="title fill single-line" :style="{ fontSize: profiles.titleFontSize + 'px' }" :title="cards[n - 1].note.title"><zot-text :text="cards[n - 1].note.title"></zot-text></h1>
								<el-space>
									<el-icon v-if="cards[n - 1].extras?.time % 2 === 0"><Timer /></el-icon>
									<span style="font-size: 14px;">{{ renders.formatTime(cards[n - 1].extras?.time) }}</span>
								</el-space>
							</div>
						</template>

						<div class="card-tools">
							<el-space wrap alignment="center">
								<!-- <el-link :underline="false"
									@click="handleCardTools('edit', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-edit-title"><el-icon><Edit-Pen /></el-icon></el-link> -->

								<el-dropdown>
									<el-icon><Edit-Pen /></el-icon>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="handleCardTools('edit-editInWindow', cards[n - 1])"><span data-l10n-id="zotcard-editInWindow">在独立窗口编辑1</span></el-dropdown-item>
											<el-dropdown-item @click="handleCardTools('edit-cardEditor', cards[n - 1])"><span data-l10n-id="zotero-zotcard-card-editor-title">源代码编辑</span></el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-link v-if="cards.length > 1" :underline="false"
										@click="handleCardTools('remove', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-remove-title"><el-icon><Circle-Close /></el-icon></el-link>
								<el-link :underline="false"
									@click="handleCardTools('delete', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-delete-title"><el-icon>
										<Delete />
									</el-icon></el-link>
								<el-dropdown>
									<el-icon><Document-Copy /></el-icon>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item @click="handleCardTools('copy-content', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-content">复制内容1</span></el-dropdown-item>
											<el-dropdown-item @click="handleCardTools('copy-text', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-text">复制文本1</span></el-dropdown-item>
											<el-dropdown-item @click="handleCardTools('copy-markdown', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-markdown">复制Markdown1</span></el-dropdown-item>
											<el-dropdown-item @click="handleCardTools('copy-html', cards[n - 1])"><span data-l10n-id="zotcard-card-manager-toolbar-copy-html">复制源代码1</span></el-dropdown-item>
											<el-dropdown-item @click="handleCardTools('copy-link', cards[n - 1])" divided><span data-l10n-id="zotcard-card-manager-toolbar-copy-link">复制链接1</span></el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
								<el-divider direction="vertical"></el-divider>
								<el-link :underline="false"
									@click="handleCardTools('print', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-print-title"><el-icon>
										<Printer></Printer>
									</el-icon></el-link>
								<el-divider direction="vertical"></el-divider>
								<el-link :underline="false" @click="handleCardTools('zotero', cards[n - 1])" data-l10n-id="zotcard-card-manager-toolbar-zotero-title">
									<img src="chrome://zotero/skin/z.svg" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
								</el-link>
							</el-space>
						</div>
						<div class="card-content" v-html="cards[n - 1].note.displayContentHtml()"></div>
						<div class="card-footer el-link-text">
							<el-descriptions :column="3">
								<el-descriptions-item span="3">
									<template #label><span data-l10n-id="zotcard-card-manager-collections">卡片所属1</span></template>
									<el-link v-if="!!cards[n - 1].more.parentItem" @click="handleLink(ZotCardConsts.cardManagerType.item, cards[n - 1].more.parentItem.id)" :underline="false" >
										<img :src="`chrome://zotero/skin/item-type/16/light/${cards[n - 1].more.parentItem.itemType.replace(/([A-Z])/g, '-$1').toLowerCase()}@2x.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
										<span>{{ cards[n - 1].more.parentItem.title }}</span>
									</el-link>
									<el-space v-else-if="cards[n - 1].more.collections.length > 0">
										<div v-for="c in cards[n - 1].more.collections" :key="c.id">
											<el-link :underline="false" @click="handleLink(ZotCardConsts.cardManagerType.collection, c.id)">
												<img :src="c.treeViewImage" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
												<span>{{ c.title }}</span>
											</el-link>
										</div>
									</el-space>
									<zot-text v-else></zot-text>
								</el-descriptions-item>
								<el-descriptions-item span="3">
									<template #label><span data-l10n-id="zotcard-card-manager-relations">卡片相关1</span></template>
									<el-space v-if="cards[n - 1].more.relations.length > 0">
										<div v-for="r in cards[n - 1].more.relations" :key="r.id">
											<el-link :underline="false" @click="handleLink(ZotCardConsts.cardManagerType.item, r.id)">
												<img :src="`chrome://zotero/skin/item-type/16/light/${r.itemType.replace(/([A-Z])/g, '-$1').toLowerCase()}@2x.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
												<span>{{ r.title }}</span>
											</el-link>
										</div>
									</el-space>
									<zot-text v-else></zot-text>
								</el-descriptions-item>
								<el-descriptions-item v-if="profiles.parseCardType">
									<template #label><span data-l10n-id="zotcard-card-manager-cardtype">卡片类型1</span></template>
									<span class="el-link-text"><zot-text :text="cards[n - 1].more.cardtype"></zot-text></span>
								</el-descriptions-item>
								<el-descriptions-item span="2">
									<template #label><span data-l10n-id="zotcard-card-manager-tags">卡片标签1</span><span class="el-link-text"></template>
									<el-space v-if="cards[n - 1].more.tags.length > 0">
										<div v-for="t in cards[n - 1].more.tags" :key="t.tag">
											<img v-if="t.type === ZotCardConsts.tagType.zotero" :src="`chrome://zotero/skin/tag.svg`" onerror="this.src='../images/zotero32.png'" class="el-icon"><img>
											<span :style="{color: t.color}">{{ t.tag }}</span>
										</div>
									</el-space>
									<zot-text v-else></zot-text>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label><span data-l10n-id="zotcard-card-manager-date">卡片日期1</span></template>
									<span class="el-link-text"><zot-text :text="cards[n - 1].more.date"></zot-text></span>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label><span data-l10n-id="zotcard-card-manager-dateAdded">创建时间1</span></template>
									<span class="el-link-text"><zot-text :text="cards[n - 1].note.dateAdded"></zot-text></span>
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label><span data-l10n-id="zotcard-card-manager-dateModified">修改时间1</span></template>
									<span class="el-link-text"><zot-text :text="cards[n - 1].note.dateModified"></zot-text></span>
								</el-descriptions-item>
								<el-descriptions-item v-if="profiles.parseWords">
									<template #label><span data-l10n-id="zotcard-card-manager-words">卡片字数1</span></template>
									<span class="el-link-text" :title="cards[n - 1].more.statistics.title">
										{{ cards[n - 1].more.statistics.text }}
									</span>
								</el-descriptions-item>
								<el-descriptions-item v-if="profiles.parseWords">
									<template #label><span data-l10n-id="zotcard-card-manager-lines">卡片行数1</span></template>
									<span class="el-link-text">
										{{ cards[n - 1].more.statistics.lines }}
									</span>
								</el-descriptions-item>
								<el-descriptions-item v-if="profiles.parseWords">
									<template #label><span data-l10n-id="zotcard-card-manager-sizes">卡片占空间1</span></template>
									<span class="el-link-text">
										{{ cards[n - 1].more.statistics.space }}
									</span>
								</el-descriptions-item>
							</el-descriptions>
						</div>
					</el-card>
				</el-carousel-item>
			</el-carousel>
		</div>
	</div>
</body>
</html>